@keyframes varietycolorbtn {
    0% {
        background-position: 0%;
    }
    100% {
        background-position: 400%;
    }
}


@keyframes clickripplebtn{
    0%{
        width: 0;
        height:  0;
        opacity: 0.5;
    }
    100%{
        width: 500px;
        height: 500px;
        opacity: 0.5;
    }
}


@keyframes btnline1{
    0%{
        transform: translateX(-100%);
    }
    100%{
        transform: translateX(100%);
    }
}

@keyframes btnline3{
    0%{
        transform: translateX(100%);
    }
    100%{
        transform: translateX(-100%);
    }
}
@keyframes btnline2{
    0%{
        transform: translateY(-100%);
    }
    100%{
        transform: translateY(100%);
    }
}
@keyframes btnline4{
    0%{
        transform: translateY(100%);
    }
    100%{
        transform: translateY(-100%);
    }
}



@keyframes movebtn{
    0%{
        left: -60px;
    }
    100%{
        left: 100%;
    }
}